<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>三栏布局</title>
		<style type="text/css">
			.middle1 {
				height: 200px; margin: 0 210px; background: #ffe6b8;
			}
			.left1,.right1 {
				width: 200px;height: 200px;background: #a0b3d6;
			}
			.left1{
				float: left;
			}
			.right1 {
				float: right;
			}
			
			.left2,.right2{position:absolute;top:0;width: 200px;height: 200px;}
			.left2{left:0;background: #a0b3d6;}
			.right2{right:0;background: #a0b3d6;}
			.middle2{margin:0 210px;background: #ffe6b8;height: 200px;}
			
			.middle3 {
				width:100%;height: 200px;float: left;
			}
			.middle3 #body {
				margin: 0 210px;background: #ffe6b8;height: 100%;
			}
			.left3,.right3 {
				width: 200px;height: 200px;float: left;background: #a0b3d6;
			}
			.left3{
				margin-left: -100%;
			}
			.right3 {
				margin-left: -200px;
			}
		</style>
	</head>
	<body>
		<h1><dl>
			<dt>三种常见的三栏布局方式</dt>
			<dd>1.两侧左右浮动</dd>
			<dd>2.两侧左右绝对定位，中间空出margin</dd>
			<dd>3.中间浮动，两侧margin负值</dd>
		</dl></h1>
		<!--两侧左右浮动-->
		<div class="left1">左</div>
		<div class="right1">右</div>
		<div class="middle1">中</div>
		<hr />
		<!--两侧左右绝对定位-->
		<div id="" style="position: relative;">
			<div class="left2">左</div>
			<div class="middle2">中</div>
			<div class="right2">右</div>
		</div>
		<hr />
		<!--margin负值-->
		<div class="middle3">
			<div id="body">中</div>
		</div>
		<div class="left3">left</div>
		<div class="right3">right</div>
	</body>
</html>
